<template>
  <!-- 观看历史 -->
	<div class="watch-history-box">
		<!--没有关注-->		
		<ZxyhHeader v-if="getPlatform =='app'" :title="'观看记录'" :isClose='false'></ZxyhHeader>
		<div v-else class="history-box-title">
			<div class="back" v-if="isBack"  @click="comeBack"></div>
			<p>观看记录</p>
		</div>
		<div v-if="historyList.length<1" class="no-data">
			<i></i>
			<p>您还没有观看记录，快去看看视频吧～</p>
		</div>
		<ul v-else class="history-content">
			<li class="history-li" v-for="(v,index) of historyList" :key="index">
				<p class="history-li-date">{{v.time | fnTime(1)}}</p>
				<div class="history-li-item" v-for="item of v.info" :key="item.vid" @click="linkLive(item)">
					<img :src="item.imagUrl+'?x-oss-process=image/resize,m_fixed,h_134,w_250'" alt="">
					<div class="history-li-right">
						<p>{{item.title}}</p>
						<p>{{item.subTitle}}</p>
						<p><span class="watch-progress">{{item.playProcess | playProcess}}</span><span>{{item.viewTime |fnTime}}</span></p>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components:{
		 ZxyhHeader
		},
		data() {
			return {
				isBack:false,//返回按钮显示不显示
				historyList: [],
				getPlatform:fun.getPlatform() //app wx
			};
		},
		created() {
			this.$store.dispatch("hideNav");
			var ua = navigator.userAgent.toLowerCase();
			this.isBack = (/MicroMessenger/i).test(ua); //true微信 
			this.historyList = JSON.parse(window.sessionStorage.getItem(this.$channel+'recordList'));
		},
		mounted: function() {
			this.$store.dispatch("hideNav");		
		},
		methods: {
			comeBack() { //返回上一页
				this.$router.push(`/${this.$channel}/mine`);
			},
			linkLive(item) {
				this.$router.push(`/${this.$channel}/liveBack/${item.vid}?dzhPage=true`);
			},
				
		},
		filters:{
			fnTime( time ,type){  
				if(!time) return
				let ptime = new Date(time.replace(/-/g, "/")).getTime();
				const twentyFourHours = 24 * 60 * 60 * 1000;
				const fortyEightHours = 24 * 60 * 60 * 1000 * 2;
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const today = `${year}-${month}-${day}`; 
				const todayTime = new Date(today.replace(/-/g, "/")).getTime();
				const yesterdayTime = new Date(todayTime - twentyFourHours).getTime();
				if(type){
					if( ptime >= todayTime ){
					    return '今天 ';
					}else if( ptime < todayTime && yesterdayTime <= ptime ){
						return '昨天';
					}else{
						return '更早';
					}
				}else{				
					if( ptime >= todayTime ){
						const getTime = time.split(' ')[1]
						return '今天 '+ getTime.substring(0,getTime.length-3);
					}
					else if( ptime < todayTime && yesterdayTime <= ptime ){
						const getTime = time.split(' ')[1]
						return '昨天 '+ getTime.substring(0,getTime.length-3);
					}else{
						const getTime = time.replace(/-/g,"/")							
						return getTime.substring(0,getTime.length-3);
					}
				}
			},
			playProcess(process){
				if(process == null || process==''){
                    return ''
				}else if(parseFloat(process)*100 < 100){
                    return '观看不足1%'
				}else if(parseFloat(process)*100 == 10000){
					return '已看完'
				}else{
					return `已观看${Math.round(parseFloat(process))}%`
				}
			}

		}
	};
</script>

<style scoped="scoped">
  .watch-history-box {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .watch-history-box .header-conatiner-zxyhIos,
.header-conatiner {
  overflow: hidden;
  /* position: absolute */
  position: relative;
  left: 0px;
  top: 0px;
  /* background: url('../../zxyhPages/newHomeCom/zxyhBG.png') no-repeat center; */
  background-size: cover;
}

  .history-box-title {
		position: relative;
	}
 .history-box-title p {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}
  .back {
		width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
	}
	/* 无数据 */
	.no-data{
		display: flex;
		flex-direction: column;
	    align-items: center;
		padding-top:300px;
	}
	.no-data i{
        height:326px;
		width: 326px;
		background: url('../../assets/images/zxyh/my/watch_history.png') no-repeat;
		background-size: 100% 100%;
	}
	.no-data p{
		font-size: 30px;
		font-weight: 400;
		color: #999999;
		line-height: 42px;
		letter-spacing: 1px;
	}
	.history-content {
		width: 100vw;
		height: calc(100vh - 88px);
		padding: 5px 25px 30px 27px;
		overflow-y: scroll;
  }
  .header-conatiner-zxyhIos + .history-content{
		height: calc(100vh - 148px);	
   }
   .history-li{
	   display: flex;
	   flex-direction: column;
	   margin-top: 25px;
   }
   .history-li-date{
	   margin-bottom: 17px;
	   font-size: 32px;
	   font-weight: 500;
	   color: #333333;
	   line-height: 45px;
	   letter-spacing: 1px;
   }
   .history-li-item{
	   display: flex;
	   flex-direction: row;
	   margin-bottom: 27px;
   }
   .history-li-item img{
	   width: 330px;
	   height: 188px;
	   margin-right: 20px;
	   border-radius: 24px;
   }
   .history-li-right{
	   width: calc(100vw - 408px);
   }
   .history-li-right p{
	    width: 1005;
   }
   .history-li-right p:nth-of-type(1){
        height: 42px;
		font-size: 30px;
		font-weight: 400;
		color: #333333;
		line-height: 42px;
		letter-spacing: 1px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
   }
   .history-li-right p:nth-of-type(2){
        height: 80px;
	    margin-bottom: 35px;
		font-size: 28px;
		font-weight: 400;
		color: #ACACAC;
		line-height: 40px;
		letter-spacing: 1px;
		display: -webkit-box;
        -webkit-line-clamp:2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
   }
   .history-li-right p:nth-of-type(3){
	    font-size: 22px;
		font-weight: 400;
		color: #666666;
		line-height: 30px;
   }
   .history-li-right .watch-progress{
	   margin-right: 12px;

   }
</style>